<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 1.抓到心div */
			div{
				width: 300px;
				height: 300px;
				/* 效果：背景色 */
				background-color: #e4393c;
				/* 外边距属性：推   效果：居中*/
				margin-left: 10px;
				margin-top: 10px;
				/* 居中：上下  右左  页面宽度固定 */
				margin: 300px auto;
				/* 旋转  转换属性：旋转属性值 */
				transform: rotate(135deg);
				/* 美化操作：滤镜属性----下阴影效果：光晕 */
				filter: drop-shadow(0 0 30px #ff0000);
				/* 启动动画属性：关键帧名称  过渡时间 流畅度  无限次*/
				animation: heart .6s linear infinite;
				/* 两圆？？？ */
				/* 伪类选择器：追加效果
				:after    语法:任意选择器    配合属性 content:"内容"
				功能:追加一个效果:在元素之后生成一行文本内容
				*/
			}
		    div:after{
				content:"";
				   /* html很多元素：种类
				   
				   文本内容--->行内元素，特点：不可设置宽高，在一行内显示
				              块元素，特点：可设宽高，独占一行
							  行内元素转换为块元素---display属性：行转块
				   */
				display: block;
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				   /* 倒角：画圆*/
				border-radius: 50%;
				   /* 微调定位*/
				position: relative;
				left: -150px;
				top: -300px;
			}
			div:before{
			   	content:"";
			   	   /* html很多元素：种类
			   	   
			   	   文本内容--->行内元素，特点：不可设置宽高，在一行内显示
			   	              块元素，特点：可设宽高，独占一行
			   				  行内元素转换为块元素---display属性：行转块
			   	   */
			   	display: block;
			   	width: 300px;
			   	height: 300px;
			   	background-color: #e4393c;
			   	   /* 倒角：画圆*/
			   	border-radius: 50%;
			   	   /* 微调定位*/
			   	position: relative;
			   	top: 150px;
			}
			
			/* 关键帧属性：功能：手翻书功能 */
			@keyframes heart{
				0%{
					/* 缩放  转换属性  属性值 scale（1）代表等比例，1以下缩小，1以上放大*/
					transform: rotate(135deg) scale(1);
				}
				30%{
					transform: rotate(135deg) scale(.8);
				}
				100%{
					transform: rotate(135deg) scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<!-- 心 html：div -->
		<div></div>
		<audio src="img/心跳_爱给网_aigei_com.mp3" autoplay controls loop></audio>
	</body>
</html>